<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <!--引入思源黑字体-->
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC:100,300,400,500,700,900"
    />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
  </head>

  <body>
    <div id="app">
      <style>
        .first-screen-wrap {
          position: fixed;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
        }
        .first-screen-title {
          position: fixed;
          width: 100px;
          top: 100px;
          color: #1890ff;
          font-family: Noto Sans SC;
          font-style: normal;
          font-weight: 400;
        }
        .first-screen {
          height: 50px;
          width: 50px;
          transform: rotate(45deg);
          animation: first-screen 1.5s infinite;
        }
        .first-screen-square {
          width: 25px;
          height: 25px;
          background-color: #1890ff;
          float: left;
        }
        .first-screen-square:nth-of-type(1) {
          animation: first-screen-one 3s infinite;
        }
        .first-screen-square:nth-of-type(2) {
          animation: first-screen-two 3s infinite;
        }
        .first-screen-square:nth-of-type(3) {
          animation: first-screen-three 3s infinite;
        }
        .first-screen-square:nth-of-type(4) {
          animation: first-screen-four 3s infinite;
        }
        @keyframes first-screen {
          100% {
            transform: rotate(-45deg);
          }
        }
        @keyframes first-screen-one {
          25% {
            border-radius: 50%;
            transform: translate(0, -50px) rotate(-180deg);
          }
          100% {
            transform: translate(0, 0) rotate(-180deg);
          }
        }
        @keyframes first-screen-two {
          25% {
            border-radius: 50%;
            transform: translate(50px, 0) rotate(-180deg);
          }
          100% {
            transform: translate(0, 0) rotate(-180deg);
          }
        }
        @keyframes first-screen-three {
          25% {
            border-radius: 50%;
            transform: translate(-50px, 0) rotate(-180deg);
          }
          100% {
            transform: translate(0, 0) rotate(-180deg);
          }
        }
        @keyframes first-screen-four {
          25% {
            border-radius: 50%;
            transform: translate(0, 50px) rotate(-180deg);
          }
          100% {
            transform: translate(0, 0) rotate(-180deg);
          }
        }
      </style>
      <div class="first-screen-wrap">
        <div class="first-screen">
          <div class="first-screen-square"></div>
          <div class="first-screen-square"></div>
          <div class="first-screen-square"></div>
          <div class="first-screen-square"></div>
        </div>
        <div class="first-screen-title">加载中......</div>
      </div>
    </div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>
